<template>
  <fullScreenContainer  title="湖南省农业产业分布一张图" type="fullScreenContainer">
    <template slot="leftContent">
      <Panel key="jdfj" v-model="tabs_value" :tabs="tabs" @change="change" height="100%">
        <div class="jdfj-total">
          <div class="text">规上企业</div>
          <div class="number">{{ jgjgqy }}</div>
          <div class="unit">家</div>
        </div>
        <div class="jdfj-tabs1">
          <tabs1 v-model="tabs1_value" :tabs="[{ name: '按企业规模分析', value: '1' }]"></tabs1>
        </div>
        <div class="jdfj-box">
          <div class="jdfj-left-box" v-for="item,index in cygk1">
            <img :src="ltqy[index]" alt="" srcset="" />
            <div class="jdfj-right-box-1">
              <div class="right-top" style="justify-content: center;">
                <span class="number">{{ item.number }}</span>
                <span class="text">家</span>
              </div>
              <div class="right-bottom" style="text-align: center;">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="jdfj-tabs1">
          <tabs1 v-model="tabs1_value" :tabs="[{ name: '按企业区域分析', value: '1' }]"></tabs1>
        </div>
        <div class="jdfj-tabs2" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          ">
          <tabs2 v-model="tabs2_valuea" :is-cancel="true" :tabs="[
    { name: '全部', value: '0' },
    { name: '综合性加工', value: '1' },
    { name: '初加工', value: '2' },
    { name: '精加工', value: '3' },
  ]" @change="tabs_change"></tabs2>
        </div>
        <div class="jdfj-bar">
          <echartsDemo key="top" title="家" :initData="qyqyfx" :initChart="topChart"></echartsDemo>
        </div>
      </Panel>
    </template>
    <template slot="rightContent">
      <Panel key="jdfj22" :tabs="[{ name: '一产情况分析', value: '1' }]" height="60%">
        <template slot="right">
          <cselect v-model="select1_value" :dropList="orgList" @change="orgChange"></cselect>
        </template>
        <div class="jdfj-tabs1">
          <tabs1 v-model="tabs1_value" :tabs="[{ name: '整体数据', value: '1' }]"></tabs1>
        </div>
        <div class="jdfj-box">
          <div @click="ycDivClick(index)" class="jdfj-left-box" style="height: 177px;cursor: pointer;" v-for="item,index in cygk2">
            <img :src="ztsj[index]" alt="" srcset="" />
            <div class="jdfj-right-box-1">
              <div class="right-top" style="text-align: center;" >
                <span class="number">{{ item.number }}</span>
                <span class="text">{{ item.unit }}</span>
              </div>
              <div class="right-bottom" style="text-align: center;">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <tabs1 v-model="tabs1_value" :tabs="[{ name: '趋势分析', value: '1' }]"></tabs1>
        <div class="jdfj-tb">
          <echartsDemo key="zcqk" :initData="zcqk" :initChart="barChart"></echartsDemo>
        </div>
      </Panel>
      <Panel key="jdfj2" :tabs="[{ name: '二产情况分析', value: '1' }]" height="40%">
        <div class="jdfj-total">
          <div class="text">二产产值</div>
          <div class="number">{{ eccz }}</div>
          <div class="unit">亿元</div>
        </div>
        <tabs1 v-model="tabs1_value" :tabs="[{ name: '趋势分析', value: '1' }]"></tabs1>
        <div class="jdfj-tb">
          <echartsDemo key="zcqk2" :initData="zcqk2" :initChart="barChart"></echartsDemo>
        </div>
      </Panel>

    </template>
    <template slot="fullScreenMap">
      <div class="map-page-container">
        <Map ref="Map"></Map>
      </div>
    </template>
    <template slot="centerContent">
      <map-tools :layerTabsShow="false" :menuShow2="false" :menuShow3="false"
                 @iconChange="iconChange" @projectIconChange="projectIconChange"></map-tools>
    </template>
  </fullScreenContainer>
</template>
<script>
import Map from '@/Iframe/kcgis3x.vue'
import MapTools from '@/layout/components/Center/index.vue'
import ltqy0 from './images/ltqy0.png'
import ltqy1 from './images/ltqy1.png'
import ltqy2 from './images/ltqy2.png'
import ltqy3 from './images/ltqy3.png'
import ztsj0 from './images/ztsj0.png'
import ztsj1 from './images/ztsj1.png'
import ztsj2 from './images/ztsj2.png'
import home from '../templateBigScreen2/box1.png'
import echartsDemo from '@/echartsDemo/index.vue'
import tabs1 from '../templateBigScreen/tabs1.vue'
import tabs2 from '../templateBigScreen/tabs2.vue'
import pieChart from '../templateBigScreen/pieChart'
import topChart from '../templateBigScreen/topChart'
import barChart from '../templateBigScreen2/barChart'
import box2 from '../templateBigScreen/box2.vue'
import box3 from '../templateBigScreen/box3.vue'
import cselect from '../templateBigScreen2/Select/index.vue'
import scroll from '../templateBigScreen/scroll.vue'
import { getChartData } from "@/apis/bigOneIndex";
import {getList} from "@/apis/bigIndustryIndex";
import projectLayerData from "../templateBigScreen2/gisData/projectLayerData";
import industryLayerData from '../templateBigScreen2/gisData/industryLayerData';
import xzqhData from "../templateBigScreen2/gisData/qxxzqh";

export default {
  components: {
    Map,
    MapTools,
    tabs1,
    echartsDemo,
    box2,
    box3,
    tabs2,
    cselect,
    scroll,
  },

  data() {
    return {
      tabs2_valuea: '0',
      home,
      ltqy: [ltqy0,ltqy1,ltqy2,ltqy3],
      ztsj:[ztsj0,ztsj1,ztsj2],
      pieChart,
      barChart,
      topChart,
      projectLayerData,
      industryLayerData,
      xzqhData,
      tabs1_value: '1',
      select1_value: '',
      tabs2_value: '1',
      tabs: [
        {
          name: '规上企业分析',
          value: '1',
        },
      ],
      tabs_value: '1',
      learDataColumnsConfg: [
        {
          label: '年份',
          prop: 'belongYear',
          width: '15%',
          paddingLeft: '0px',
        },
        {
          label: '加工基地',
          prop: 'baseName',
          width: '25%',
          paddingLeft: '0px',
        },
        {
          label: '二产产量(吨)',
          prop: 'yieldValue',
          width: '30%',
          paddingLeft: '0px',
        },
        {
          label: '二产产值(万元)',
          prop: 'outputValue',
          width: '30%',
          paddingLeft: '0px',
        },
      ],
      rowdata: [

      ],
      cygk1: [

      ],
      cygk2: [
      ],
      qyqyfx: [

      ],
      zcqk: {

      },
      zcqk2:{},
      layerType: "",
      jgjgqy: 0,
      eccz: 0,
      orgList: [
      { label:'全省',value:''},
      { label: '长沙市',value:'长沙市'},
      { label: '株洲市',value:'株洲市'},
      { label: '湘潭市',value:'湘潭市'},
      { label: '衡阳市',value:'衡阳市'},
      { label: '邵阳市',value:'邵阳市'},
      { label: '常德市',value:'常德市'},
      { label: '张家界市',value:'张家界市'},
      { label: '益阳市',value:'益阳市'},
      { label: '郴州市',value:'郴州市'},
      { label: '永州市',value:'永州市'},
      { label: '岳阳市',value:'岳阳市'},
      { label: '怀化市',value:'怀化市'},
      { label: '娄底市',value:'娄底市'},
      ],
    }
  },
  created() {
    this.getData();
  },
  methods: {
    change(value) {
      console.log(value, 'value')
    },
    orgChange(value){
      this.select1_value  =value;
      this.getChartData2();
      this.getChartData3()
      this.getChartData5();
      this.getChartData6();
    },
    projectIconChange(value) {
      this.showGisLayer(value, this.projectLayerData, 1);
    },
    showGisLayer(layerType, layerData, type) {
      this.clearGisLayer();
      if (layerType && layerData && layerData.length > 0) {
        const layerTypeArray = layerType.split(',').map(pid => parseInt(pid, 10));
        const layersToShow = layerTypeArray.map(pid => this.findLayerByPid(type, pid)).filter(layer => layer !== undefined);
        if (type === 0) {
          this.displayLayers(layersToShow);
        } else {
          this.displayProjectLayers(layersToShow)
        }
      }
    },


    findLayerByPid(type, pid) {
      const layerData = type === 0 ? this.industryLayerData : this.projectLayerData;
      return layerData.find(layer => layer.pid === pid);
    },

    displayProjectLayers(layers) {
      layers.forEach(layer => {
        let mergedPolygon = [];
        let htmlData = [];
        layer.xzqh.forEach(xzqhItem => {
          const multiPolygon = this.getMultiPolygonByCode(xzqhItem.code);
          const coordinates = multiPolygon.geometry.coordinates;
          const properties = multiPolygon.properties;
          const html = this.buildProjectIconHtml(xzqhItem.dbzp);
          htmlData.push({
            x: properties.x,
            y: properties.y,
            html: html
          })
          coordinates.forEach(coord => {
            mergedPolygon.push({
              polyArr: coord,
              style: {
                color: layer.material.polygon.color,
                alpha: layer.material.polygon.alpha
              }
            })
          });
        })
        this.addGisLayer(mergedPolygon, htmlData);
      })
    },

    buildProjectIconHtml(dbzp) {
      let resHtml = '';
      if (dbzp && dbzp.length) {
        dbzp.forEach((item, index1) => {
          resHtml += `<div class="label-container purple-background">
                    <img src="${item.icon}" alt="图标" class="icon">
                    <span class="label-text">${item.name}</span>
                  </div>`;
        });
      }
      return resHtml;
    },

    buildIndustryIconHtml(dbzp) {
      if (!dbzp || !dbzp.length) return '';
      const containerClass = 'label-container purple-background';
      const iconClass = 'label-icon2';
      const textClass = 'label-text2';
      return dbzp.map(item => {
        const textStyle = `background-color: ${item.color || '#FFF482'}`;
        return `
            <div class="${containerClass}">
              <img src="${item.icon}" alt="图标" class="${iconClass}">
              <span class="${textClass}" style="${textStyle}">${item.name}</span>
            </div>
          `;
      }).join('');
    },


    displayLayers(layers) {
      // 实现显示图层的逻辑
      layers.forEach(layer => {
        let mergedPolygon = [];
        let htmlData = [];
        layer.cyd.forEach(cydItem => {
          cydItem.xzqh.forEach(xzqh => {
            const multiPolygon = this.getMultiPolygonByCode(xzqh.code);
            const coordinates = multiPolygon.geometry.coordinates;
            const properties = multiPolygon.properties;
            const html = this.buildIndustryIconHtml(xzqh.dbzp);
            htmlData.push({
              x: properties.x,
              y: properties.y,
              html: html
            })
            coordinates.forEach(coord => {
              mergedPolygon.push(
                {
                  polyArr: coord,
                  style: {
                    color: cydItem.material.polygon.color || 'FCC152',
                    alpha: cydItem.material.polygon.alpha || 0.5
                  },
                  label: {
                    text: cydItem.name,
                    textStyle: {
                      fillColor: cydItem.material.label.fillColor || '#d31313',
                      outlineColor: cydItem.material.label.outlineColor || '#ffffff',
                    }
                  }
                })
            });
          })
        })
        this.addGisLayer(mergedPolygon, htmlData);
      });
    },

    addGisLayer(mergedPolygon, htmlData) {
      if (window.kcgis&& window.mapApi) {
        window.mapApi.addNativePolygon(mergedPolygon,htmlData);
      }
    },

    clearGisLayer() {
      if (window.kcgis&& window.mapApi) {
        window.mapApi.clearAllVectorLayer();
      }
    },


    getMultiPolygonByCode(code) {
      const feature = this.xzqhData.features.find(feature => feature.properties.code === code);
      if (feature) {
        return feature;
      } else {
        return null; // 如果找不到匹配的code，返回null
      }
    },
    iconChange(data) {
      this.showGisLayer(data, this.industryLayerData, 0);
    },
    tabs_change(value) {
      this.getChartData1(this.layerType);
    },

    ycDivClick(index){
      this.getChartData3(index);
    },
    getData(layerType) {
      this.getChartData1(layerType);
      this.getChartData2(layerType);
      this.getChartData3(layerType);
      this.getChartData4(layerType);
      this.getChartData5(layerType);
      this.getChartData6();
      // this.getOutputValueList();
    },
    getChartData1(layerType) {
      let chartName = "加工专题-按企业区域分析-全部";
      switch (this.tabs2_valuea) {
        case "0": chartName = "加工专题-按企业区域分析-全部"; break;
        case "1": chartName = "加工专题-按企业区域分析-综合性加工"; break;
        case "2": chartName = "加工专题-按企业区域分析-初加工"; break;
        case "3": chartName = "加工专题-按企业区域分析-精加工"; break;
        default: chartName = "加工专题-按企业区域分析-全部";
      }
      let params = { "layerType": layerType, "chartName": chartName };
      getChartData(params).then(res => {
        this.qyqyfx = [];
        res.data.forEach(e => {
          var data = { "executeOorgname": e.name, "zs": e.value }
          this.qyqyfx.push(data);
        });
      });
    },
    getChartData2() {
      let params = { "layerType": this.layerType, "chartName": "产业分布一张图-一产情况分析-整体数据","area":this.select1_value };
      getList(params).then(res => {
        this.cygk2 = [];
        res.data.forEach((e, index) => {
          var data = { "number": e.value, "unit": e.unit, "name": e.name };
          if (index < 3) {
            this.cygk2.push(data);
          }
        });
      });
    },
    getChartData3(index) {
      let chartName = "产业分布一张图-一产情况分析-趋势分析-一产产量";
      let unit ="万吨";
      if(index == 1){
        chartName = "产业分布一张图-一产情况分析-趋势分析-一产产值";
        unit = "亿元";
      }else if(index == 2){
        chartName = "产业分布一张图-一产情况分析-趋势分析-种植面积";
        unit = "万亩";
      }
      let params = { "layerType": this.layerType, "chartName": chartName ,"area":this.select1_value};
      getList(params).then(res => {
        this.zcqk = {};
        let data = this.formatChartData(res.data);
        data.yAxisName = unit;
        this.zcqk = data;
      });
    },
    getChartData4(layerType) {
      let params = { "layerType": layerType, "chartName": "加工专题-按企业规模分析" };
      getChartData(params).then(res => {
        this.cygk1 = [];
        res.data.forEach((e, index) => {
          var data = { "number": e.value, "unit": "家", "name": e.name };
          if (index < 5) {
            this.cygk1.push(data);
          }
        });
        this.cygk1.sort(function (a, b) {
          let a1, b1;
          if (a.name.includes("国家")) {
            a1 = 0;
          } else if (a.name.includes("省")) {
            a1 = 1;
          } else if (a.name.includes("市")) {
            a1 = 2;
          } else if (a.name.includes("其他")) {
            a1 = 3;
          }
          if (b.name.includes("国家")) {
            b1 = 0;
          } else if (b.name.includes("省")) {
            b1 = 1;
          } else if (b.name.includes("市")) {
            b1 = 2;
          } else if (b.name.includes("其他")) {
            b1 = 3;
          }
          return a1 - b1;
        });
      });
    },
    getChartData5() {
      let params = { "layerType": this.layerType, "chartName": "产业分布一张图-二产情况分析-趋势分析" ,area:this.select1_value};
      getList(params).then(res => {
        this.zcqk2 = {};
        let data = this.formatChartData(res.data);
        data.yAxisName = "亿元";
        this.zcqk2 = data;
      });
    },

    getChartData6() {
      let params = { "layerType": this.layerType, "chartName": "产业分布一张图-二产情况分析-二产产值" ,area:this.select1_value};
      getList(params).then(res => {
        this.eccz = 0;
        if(res.data && res.data.length > 0 ) this.eccz = res.data[0].value;
      });
    },
    // getOutputValueList(layerType) {
    //   let params = { "pageNum": 1, "pageSize": 10, "layerType": this.layerType, "belong": "加工专题" ,"area": this.select1_value };
    //   getOutputValueList(params).then(res => {
    //     this.rowdata = res.rows;
    //   });
    // },
    formatChartData(data) {
      let legendData = [];
      let seriesData = [];
      let result = {};
      data.forEach(e => {
        legendData.push(e.name);
        seriesData.push({ "name": e.name, "value": e.value });
      });
      result.legendData = legendData;
      result.xAxisData = legendData;
      result.seriesData = seriesData;
      return result;
    }
  },
  mounted() { },
}
</script>
<style scoped lang="scss">
.jdfj-box {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.table1-box {
  width: 100%;
}

.jdfj-tabs1 {
  margin-top: 32px;
}

.jdfj-tabs2 {
  margin-top: 18px;

  span {
    font-family: Source Han Sans;
    font-size: 12px;
    font-weight: normal;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 2px;

    font-variation-settings: 'opsz' auto;
    font-feature-settings: 'kern' on;
    /* 文字色 */
    color: #c2e5ff;
    cursor: pointer;
    z-index: 0;
  }
}

.jdfj-left-box {
  width: 83px;
  height: 145px;
  border-radius: 5px;
  opacity: 1;
  /* 自动布局 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  background: linear-gradient(180deg,
      rgba(59, 214, 172, 0.1) 0%,
      rgba(59, 214, 172, 0) 100%);

  z-index: 0;

  .jdfj-right-box-1 {
    .right-top {
      margin-top: 26px;
      opacity: 1;
      /* 自动布局 */
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 5px;
      z-index: 0;

      .number {
        position: static;
        left: 0px;
        top: 0px;
        height: 24px;
        opacity: 1;

        font-family: DIN;
        font-size: 24px;
        font-weight: bold;
        line-height: 24px;
        letter-spacing: 0em;

        font-variation-settings: 'opsz' auto;
        background: linear-gradient(180deg, #d5fff5 15%, #8cd9c5 84%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        z-index: 0;
      }

      .text {
        opacity: 0.8;
        font-family: 思源黑体;
        font-size: 14px;
        font-weight: 350;
        line-height: 14px;
        letter-spacing: 0em;

        /* 纯白 */
        color: #ffffff;

        z-index: 1;
      }
    }

    .right-bottom {
      height: 21px;
      opacity: 1;

      font-family: 思源黑体;
      font-size: 14px;
      font-weight: normal;
      line-height: normal;
      text-transform: uppercase;
      letter-spacing: 1px;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      /* 文字白 */
      color: #ffffff;

      z-index: 1;
      margin-top: 10px;
    }
  }
}

.jdfj-tz {
  margin-top: 32px;
}

.jdfj-tb {
  width: 100%;
  height: 300px;
  margin-top: 16px;
}

.flex1 {
  margin-top: 20px;
}

.jdfj-total {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;

  .text {
    /* 文字小 */
    font-family: Microsoft YaHei;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    letter-spacing: 0em;

    /* 文字色 */
    color: #d0fff2;

    z-index: 1;
  }

  .number {
    /* 数字1 */
    font-family: DIN;
    font-size: 36px;
    font-weight: bold;
    line-height: 36px;
    text-align: right;
    letter-spacing: 0px;

    background: linear-gradient(180deg, #d5fff5 15%, #8cd9c5 84%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    z-index: 2;
  }

  .unit {
    font-family: 思源黑体;
    font-size: 14px;
    font-weight: normal;
    line-height: 28px;
    letter-spacing: 0px;

    color: rgba(255, 255, 255, 0.6);

    z-index: 3;
  }
}

.jdfj-bar {
  margin-top: 18px;
  height: 512.68px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  flex-grow: 1;
  align-self: stretch;

  z-index: 2;
}
</style>
